<template>
  <div class="template-format-tab">
    <div class="tab-header">
      <el-button type="primary" @click="previewTemplate">预览</el-button>
      <el-input
        v-model="searchKeyword"
        placeholder="请输入字段名称/英文名称"
        clearable
        @input="handleSearch"
        style="width: 300px"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
    </div>

    <el-table :data="filteredTableData" v-loading="loading" border height="400">
      <el-table-column prop="fieldCategory" label="字段分类" width="150" show-overflow-tooltip>
      </el-table-column>

      <el-table-column prop="fieldName" label="字段名称" min-width="100" show-overflow-tooltip />

      <el-table-column
        prop="fieldEnglishName"
        label="字段英文名称"
        min-width="100"
        show-overflow-tooltip
      />

      <el-table-column prop="fieldType" label="字段类型" width="120" show-overflow-tooltip>
        <template #default="{ row }">
          {{ getFieldTypeName(row.fieldType) }}
        </template>
      </el-table-column>

      <el-table-column
        prop="formula"
        align="center"
        label="计算公式"
        width="100"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          {{ row.formula || '/' }}
        </template>
      </el-table-column>

      <el-table-column prop="isRequired" label="是否必填" width="100" show-overflow-tooltip>
        <template #default="{ row }">
          {{ row.isRequired ? '是' : '否' }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="120" fixed="right">
        <template #default="{ row }">
          <el-link type="primary" @click="viewDetails(row)">查看详情</el-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 字段预览对话框 -->
    <FieldPreviewDialog v-model:visible="previewVisible" :field-list="tableData" />

    <!-- 字段详情对话框 -->
    <FieldDialog
      v-model:visible="detailDialogVisible"
      :field-data="currentFieldData"
      :field-list="tableData"
      :material-id="materialId"
      :readonly="true"
    />
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Filter } from '@element-plus/icons-vue'
import FieldPreviewDialog from './FieldPreviewDialog.vue'
import FieldDialog from './FieldDialog.vue'

const props = defineProps({
  materialId: {
    type: [String, Number],
    required: true
  },
  materialInfo: {
    type: Object,
    default: () => ({})
  }
})

const loading = ref(false)
const searchKeyword = ref('')
const previewVisible = ref(false)
const detailDialogVisible = ref(false)
const currentFieldData = ref(null)

// 表格数据
const tableData = ref([])

// 监听 materialInfo.fieldConfigurationToEntity 的变化
watch(
  () => props.materialInfo?.fieldConfigurationToEntity,
  (newVal) => {
    if (newVal && Array.isArray(newVal)) {
      tableData.value = newVal
    } else {
      tableData.value = []
    }
  },
  { immediate: true, deep: true }
)

// 过滤后的数据
const filteredTableData = computed(() => {
  if (!searchKeyword.value.trim()) {
    return tableData.value
  }

  const keyword = searchKeyword.value.toLowerCase()
  return tableData.value.filter(
    (item) =>
      (item.fieldName && item.fieldName.toLowerCase().includes(keyword)) ||
      (item.fieldEnglishName && item.fieldEnglishName.toLowerCase().includes(keyword))
  )
})
// 获取字段类型名称（直接使用接口类型值）
function getFieldTypeName(fieldType) {
  return (
    {
      1: '两位小数',
      2: '整数',
      3: '日期',
      4: '文本',
      5: '枚举'
    }[fieldType] || '未知'
  )
}
function handleSearch() {
  // 搜索逻辑已在computed中处理
}

function previewTemplate() {
  if (!tableData.value || tableData.value.length === 0) {
    ElMessage.warning('暂无字段数据可预览')
    return
  }
  previewVisible.value = true
}

function viewDetails(row) {
  currentFieldData.value = row
  detailDialogVisible.value = true
}
</script>

<style lang="scss" scoped>
.template-format-tab {
  height: 100%;
  display: flex;
  flex-direction: column;

  .tab-header {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.table-header {
  display: flex;
  align-items: center;
  gap: 4px;

  .filter-icon {
    color: #909399;
    cursor: pointer;

    &:hover {
      color: #409eff;
    }
  }
}
</style>
